<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Flying Saucer: SVG via Replaced Elements</title>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen"/>
    <style>
        body {
            font-family: tahoma, verdana, arial;
            margin-top: 10px;
        }

        #fslogo {
            border-style: none;
            text-decoration: none;
            font-family: tahoma, verdana, arial;
            font-size: 20pt;
            font-weight: bold;
            margin: 0pt;
            padding: 0pt;
            margin-bottom: 10pt;
        }

        #pagebyline {
            border-style: none;
            font-family: tahoma, verdana, arial;
            font-size: 16pt;
        }

        .small_icon {
            width: 16px;
            height: 16px;
        }

        .med_icon {
            width: 32px;
            height: 32px;
        }

        .normal_icon {
            width: 48px;
            height: 48px;
        }

        .large_icon {
            width: 64px;
            height: 64px;
        }

    </style>
</head>

<body>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">SVG via Replaced Elements</span><br/>
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/go-home.svg" />

<p>Flying Saucer allows you to replace any XML element with a ReplacedElement, which is a component
    that knows how to draw itself on the given user agent canvas (e.g. screen, PDF). You can use this
    functionality to extend Flying Saucer to include elements, such as SVG, rendered by a third-party
    library. To keep the core Flying Saucer as small as possible, we don't ourselves include these extensions,
    but this demo shows that it is not difficult to do.</p>

<p>There are several libraries for rendering SVG in Java; we've chosen to use the <b>SVGSalamander</b> project hosted on
    java.net at <b>https://svgsalamander.dev.java.net</b>. There are other SVG libraries for Java available, notably
    Batik.</p>

<p>In this XHTML page, we are using a standard <code>&lt;object&gt;</code> tag to reference SVG files
    available on the classpath for this sample application. The object tag used here looks like this in its
    simplest form:</p>

<pre>
    &lt;object type="image/svg+xml" data="/svg/dat/system-users.svg" /&gt;
</pre>

<p>This references a file, <code>go-home.svg</code>, which is rendered as the small home icon shown
    at the beginning of this page. In this use of the object tag, the size of the rendered SVG is determined
    by the SVG file itself (minimum size needed to render). One of the nice things about SVG, however, is
    that it is written to allow for smooth, proportional scaling. We can scale the exact same file by
    using either CSS (via <code>id</code>, <code>class</code>, or <code>style</code> attributes) or via
    <code>width</code> and <code>height</code> attributes on the <code>object</code> tag. For example, the following
    tag will scale the same icon using the CSS defined by the class "normal_icon", which defines the width and height
    as 48px each</p>

<pre>
    &lt;object class="med_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" /&gt;
</pre>

<p>And here's what how that renders</p>

<object class="med_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" />

<p>But we can make it large, too--just by changing the CSS width and height properties:</p>

<object class="normal_icon" type="image/svg+xml" data="/svg/dat/system-users.svg" />

<p>Even better, we can apply other CSS styling to our SVG, including positioning. Note that by default, the object
    elements are declared as block-level elements, not inline. Thus we can float the following icons left, with a small
    margin added to the right, using just CSS:</p>

<object class="small_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
        data="/svg/dat/audio-x-generic.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
        data="/svg/dat/audio-x-generic.svg" />
<object class="normal_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
        data="/svg/dat/audio-x-generic.svg" />
<object class="large_icon" style="float: left; margin-right: 10px;" type="image/svg+xml"
        data="/svg/dat/audio-x-generic.svg" />

<p>Pretty nice, huh? You can embed SVG in your pages just as you would normal images--and they scale nicely!</p>

<p style="clear: both">SVG is a complex standard, and the Java libraries for rendering SVG are not always completely
    up-to-spec. You should test the SVG rendering outside of Flying Saucer first before adding it to a web page.</p>

<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-angel.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-crying.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-devil-grin.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-glasses.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-grin.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-kiss.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-plain.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-sad.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-smile-big.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-smile.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-surprise.svg" />
<object class="med_icon" style="float: left; margin-right: 10px;" type="image/svg+xml" data="/svg/dat/face-wink.svg" />

<p style="clear: both"><b>Note:</b><i>&nbsp;the SVGSalamander library is distributed under the terms of the GNU Lesser
    General Public License. The icon(s) shown on this page are from the Tango Icon Gallery, located at
    <b>http://tango.freedesktop.org</b>, and distributed under the Creative Commons Attribution-ShareAlike 2.5 License
    Agreement. We thank the folks in the Salamander and Tango communities for sharing these high-quality libraries
    with others.</i></p>
</body>
</html>

